<template>
  <div
    class="page__reset_password"
  >
    <span
      class="back op-7 link-btn inherit"
      @click="handleClose()"
    >
      <svg-icon
        icon-class="arrow"
        class=""
      />
      返回
    </span>
    <h2>重置密码</h2>
    <form-list
      ref="refForm"
      :strong-password="true"
      :label="['phone', 'code', 'pwd', 'confirmPwd']"
    />
    <div class="actions">
      <el-button
        class="main-btn"
        type="primary"
        size="large"
        @click="hadnleForogt"
      >
        确定
      </el-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { userAppStore } from "@/stores/user";
import formList, { type API } from "@/components/phone-form/form.vue";
import { updatePwd } from "@/api/login";
import { getPwdMD5Str } from "@/utils";
import PsMessage from "@/components/message/index";
const _userAppStore_ = userAppStore();

const refForm = ref<API>();
const handleClose = (closeTips = true) => {
  closeTips && PsMessage.closeAll();
  setTimeout(() => {
    _userAppStore_.setACDialogType({
      type: "phoneLogin",
      query: {
        loginType: "pwd"
      }
    });
  }, closeTips ? 12: 1500);
};
const hadnleForogt = async () => {
  const form = await refForm.value?.validate();
  if (!form) return;
  const params = {
    type: "phone",
    phoneNumber: form.phone,
    pwd: getPwdMD5Str(form.pwd),
    code: form.code,
    codeID: form.phone,
    from: "forgot",
  };
  const res = await updatePwd(params);
  PsMessage("重置密码成功");
  handleClose(false);
};
</script>

<style lang="scss" scoped>
.page__reset_password {
  position: absolute;
  inset: 0;
  padding: 32px 23px 0 23px;
  background-color: $color-white;
  border-radius: 10px;
  z-index: 1;
}
.back {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 14px;
}
h2 {
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 14px;
}
.main-btn {
  width: 100%;
}
</style>
